import React, { memo, useEffect, useRef } from 'react'

import { Carousel } from 'antd'

import { useDispatch, useSelector, shallowEqual } from 'react-redux'
import WYThemeHeaderRcm from '@/components/theme-header-rcm'
import { getNewAlbumAction } from '../../store/actionCreators'

import WYAlbumCover from '@/components/album-cover'
import { AlbumWrapper } from './style'

export default memo(function WYNewAlbum() {
  // const [album, setAlbum] = useState(0)

  const { newAlbums } = useSelector(
    state => ({
      newAlbums: state.getIn(['recommend', 'newAlbums']),
    }),
    shallowEqual
  )

  const dispatch = useDispatch()

  const pageRef = useRef()
  //  其他hokks
  // 类似于cdm 用来发送网络请求的
  useEffect(() => {
    dispatch(getNewAlbumAction(10))
  }, [dispatch])

  return (
    <AlbumWrapper>
      <WYThemeHeaderRcm title="新碟上架" />
      <div className="content">
        <button
          className="arrow arrow-left sprite_02"
          onClick={e => pageRef.current.prev()}
        ></button>
        <div className="album">
          <Carousel dots={false} ref={pageRef}>
            {[0, 1].map(item => {
              return (
                <div key={item} className="page">
                  {newAlbums.slice(item * 5, (item + 1) * 5).map(iten => {
                    return (
                      <WYAlbumCover key={iten.id} info={iten} size={100} width={118} bgp="-570px" />
                    )
                  })}
                </div>
              )
            })}
          </Carousel>
        </div>
        <button
          className="arrow arrow-right sprite_02"
          onClick={e => pageRef.current.next()}
        ></button>
      </div>
      {/* <div>
            {
              newAlbums.map((item, index) => {
                return <div key={item.id}>{item.name}</div>
              })
            }
          </div> */}
    </AlbumWrapper>
  )
})
